<template>
  <!-- 消息设置 -->
  <div class="app-container">
    <!-- 消息设置-- 对话框-->
    <comDialog
      :dialogVisible="dialogVisible"
      :title="title"
      :width="width"
      v-on:EventClose="EventClose"
    >
      <el-form
        :model="comDialogForm"
        label-width="100px"
        :rules="comDialogFormRules"
        ref="comDialogFormRef"
      >
        <!-- 模板类型 -->
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="模版类型" prop="type">
              <el-input
                v-model="comDialogForm.type"
                placeholder="请输入模版类型"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 标题 -->
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="comDialogForm.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 内容 -->
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="comDialogForm.content"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button @click="clickDialogCancel()">取消</el-button>
          <el-button type="primary" @click="clickDialogSave('comDialogFormRef')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </comDialog>

    <el-button @click="dialogVisible = true" type="primary">添加</el-button>
    <div class="boxlaw">
      <div class="comform">
        <ComForm
          ref="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
          :list="comForm"
        >
        </ComForm>
      </div>

      <ComTable
        @handleCurrentChange="CurrentPageChangeFn"
        @handleSizeChange="currentPageSizeChangeFn"
        :key="random"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
        @handleStatusChange="handleStatusChange"
      >
        <el-table-column width="180" #default="{ row }" align="left">
          <template>
            <el-button
              @click="editFn(row)"
              plain
              size="mini"
              type="primary"
              v-hasPermi="['market:coupon:edit']"
              >编辑</el-button
            >
            <!-- <el-button
              plain
              size="mini"
              type="primary"
              v-hasPermi="['market:coupon:remove']"
              @click="deleteFn(row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </ComTable>
    </div>
  </div>
</template>

<script>
import ComForm from "@/wss/components/comForm.vue";
import ComSelect from "@/wss/components/comSelect.vue";
import ComTable from "@/wss/components/comTable.vue";
import comForm from "@/wss/components/comForm.vue";
import comDialog from "@/wss/components/comDialog.vue";
import { getLocalTime } from "@/wss/utils/wss.js";
// import { getdocGetTypeApi } from "@/wss/api/ContentSupervision.js";

import {
  getMessageListApi,
  getMessageAddApi,
  getMessageEditApi,
} from "@/wss/api/systemManagement/news/notice.js";
import NewlyAdd from "./newlyAdd.vue";
export default {
  name: "coupon",
  dicts: ["sys_normal_disable"],
  components: { ComSelect, ComForm, comForm, ComTable, NewlyAdd, comDialog },

  data() {
    return {
      dialogVisible: false,
      initSelectValue: "",
      // 修改id
      editId: "",
      // 加载
      loading: false,
      paging: { pageNum: 1, pageSize: 10, status: "", total: 10 },
      // 切换筛选状态，不更新bug修复
      random: "",
      // 当前筛选的状态
      currentSelect: "",

      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},

      // 对话框S
      title: undefined,
      width: "50%",

      comDialogForm: {
        type: undefined,
        title: undefined,
        content: undefined,
      },
      comDialogFormRules: {
        type: [
          { required: true, message: "请输入模版类型", trigger: "change" },
        ],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      // 对话框E

      // 表格的数据
      tableList: [],
      tableModes: [
        {
          label: "消息编号",
          mode: "idStr",
        },
        {
          showOverflowTooltip: true,
          width: 150,

          label: "类型",
          mode: "type",
          showOverflowTooltip: true,
        },
        {
          label: "标题",
          mode: "title",
        },
        {
          width: 110,
          label: "状态",
          mode: "status",
        },
        {
          label: "创建时间",
          mode: "createTime",
          width: 200,
        },
      ],
      comForm: {
        modes: [
          {
            placeholder: "请输入消息编号",
            formType: "input",
            mode: "id",
            label: "消息编号",
            value: "",
          },
          {
            placeholder: "请输入消息标题",
            formType: "input",
            mode: "title",
            label: "消息标题",
            value: "",
          },
        ],
      },
    };
  },

  mounted() {
    this.getMessageListApiMet(this.paging);
  },
  methods: {
    // 对话框S
    EventClose() {},
    clickDialogCancel() {},
    clickDialogSave(formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          console.log(this.comDialogForm);
          // this.getMessageAddApiMet(this.comDialogForm)
        }
      });
    },
    // 对话框E

    // 修改
    editFn(row) {
      console.log(row);
      this.dialogVisible = true;
      this.editId = row.idStr;
    },
    // async deleteFn(row) {
    //   try {
    //     this.$confirm("此操删除该数据, 是否继续?", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     })
    //       .then(async () => {
    //         let result = await getCouponRemoveApi(row.idStr);
    //         console.log(result, 111111111111111111);
    //         this.getMessageListApiMet();
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!",
    //         });
    //       })
    //       .catch((e) => {
    //         // 系统报错
    //         if (e.message === "已有用户领取，不能删除") {
    //         } else {
    //           // 用户取消
    //           this.$message({
    //             type: "info",
    //             message: "已取消删除",
    //           });
    //         }
    //       });
    //   } catch (error) {}
    // },
    // 重设函数
    resetFn() {
      this.initSelectValue = "";
      this.romdom = Math.random();
      this.paging.status = "";
      console.log(this.paging, "重设");
    },
    // 当前页发生改变时候
    CurrentPageChangeFn(pageNUm) {
      this.paging.pageNum = pageNUm;
      this.getMessageListApiMet(this.paging);
    },
    // 页容量发生改变时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getMessageListApiMet(this.paging);
    },
    // 改变状态status
    handleStatusChange(row) {
      console.log(row);
    },
    // 筛选数据 查询
    queryFn(arr) {
      // 后端功能还没做出来 *******************8

      arr.forEach((item) => {
        for (const key in item) {
          this.paging[key] = item[key];
        }
      });
      console.log(this.paging);
      this.currentSelect = this.initSelectValue;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getMessageListApiMet({ id: 4 });
    },
    // 获取列表数据
    async getMessageListApiMet(pagination = null) {
      this.loading = true;
      let { rows, code, total } = await getMessageListApi(pagination);
      if (code == 200) {
        this.tableList = rows;
        this.paging.total = total;
        this.loading = false;
      }
    },

    // 添加数据数据
    async getMessageAddApiMet(pagination = null) {
      let { rows, code, total } = await getMessageAddApi(pagination);
      if (code == 200) {
        console.log(rows);
      }
    },
  },
};
</script>

<style lang ="scss" scoped>
.comform {
  margin-top: 20px;
}
</style>